<template>
  <!-- 顶部按钮行 -->
  <div style="padding: 20px">
    <!-- 预览弹框 -->
    <!-- <el-dialog
      :title="i18nt('designer.toolbar.preview')"
      :visible.sync="showPreviewDialogFlag"
      v-if="showPreviewDialogFlag"
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      v-dialog-drag
      :destroy-on-close="true"
      class="small-padding-dialog"
      width="75%"
      :fullscreen="layoutType === 'H5' || layoutType === 'Pad'"
    > -->
    <div
      v-if="renderComponent"
      class="form-render-wrapper"
      :class="[
        layoutType === 'H5'
          ? 'h5-layout'
          : layoutType === 'Pad'
          ? 'pad-layout'
          : '',
      ]"
    >
      <!-- option-data 表单radio、checkbox、select、cascader组件的选择项集合-->
      <!-- appendButtonClick	input组件的附加按钮被点击时触发 -->
      <!--formChange 表单数据改变后触发 -->
      <VFormRender
        ref="preForm"
        :form-json="formJson"
        :form-data="testFormData"
        :preview-state="true"
        :option-data="testOptionData"
        @appendButtonClick="testOnAppendButtonClick"
        @buttonClick="testOnButtonClick"
        @formChange="handleFormChange"
      >
        <!--
            <div slot="testSlot">aaaa</div>
            -->
      </VFormRender>
    </div>
    <code-editor v-model="testFunc" style="display: none"></code-editor>
    <!-- //getFormData获取表单数据对象,(needValidation = true)，获取表单数据时是否开启表单校验，默认开启 -->
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="getFormData">{{
        i18nt("designer.hint.getFormData")
      }}</el-button>
      <el-button type="primary" @click="resetForm">{{
        i18nt("designer.hint.resetForm")
      }}</el-button>
      <el-button type="primary" @click="setFormDisabled">{{
        i18nt("designer.hint.disableForm")
      }}</el-button>
      <el-button type="primary" @click="setFormEnabled">{{
        i18nt("designer.hint.enableForm")
      }}</el-button>
      <el-button type="" @click="goBack()">{{
        i18nt("designer.hint.closePreview")
      }}</el-button>
      <el-button v-if="false" @click="printFormJson">PrintFormJson</el-button>
      <el-button v-if="false" @click="testValidate">TestValidate</el-button>
      <el-button v-if="false" @click="testSetFormData">TestSF</el-button>
    </div>
    <!-- </el-dialog> -->
    <el-drawer
      :title="i18nt('designer.toolbar.nodeTreeTitle')"
      direction="ltr"
      :visible.sync="showNodeTreeDrawerFlag"
      :modal="false"
      :size="280"
      :destroy-on-close="true"
      class="node-tree-drawer"
    >
      <el-tree
        ref="nodeTree"
        :data="nodeTreeData"
        node-key="id"
        default-expand-all
        highlight-current
        class="node-tree"
        icon-class="el-icon-arrow-right"
        @node-click="onNodeTreeClick"
      ></el-tree>
    </el-drawer>
    <!-- 导入json -->
    <el-dialog
      :title="i18nt('designer.toolbar.importJson')"
      :visible.sync="showImportJsonDialogFlag"
      v-if="showImportJsonDialogFlag"
      :show-close="true"
      class="small-padding-dialog"
      center
      v-dialog-drag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
    >
      <el-alert
        type="info"
        :title="i18nt('designer.hint.importJsonHint')"
        show-icon
        class="alert-padding"
      ></el-alert>
      <code-editor
        :mode="'json'"
        :readonly="false"
        v-model="importTemplate"
      ></code-editor>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doJsonImport">
          {{ i18nt("designer.hint.import") }}</el-button
        >
        <el-button @click="showImportJsonDialogFlag = false">
          {{ i18nt("designer.hint.cancel") }}</el-button
        >
      </div>
    </el-dialog>
    <!-- 导出json -->
    <el-dialog
      :title="i18nt('designer.toolbar.exportJson')"
      :visible.sync="showExportJsonDialogFlag"
      v-if="showExportJsonDialogFlag"
      :show-close="true"
      class="small-padding-dialog"
      center
      v-dialog-drag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
    >
      <code-editor
        :mode="'json'"
        :readonly="true"
        v-model="jsonContent"
      ></code-editor>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="copy-json-btn"
          :data-clipboard-text="jsonRawContent"
          @click="copyFormJson"
        >
          {{ i18nt("designer.hint.copyJson") }}</el-button
        >
        <el-button @click="saveFormJson">{{
          i18nt("designer.hint.saveFormJson")
        }}</el-button>
        <el-button type="" @click="showExportJsonDialogFlag = false">
          {{ i18nt("designer.hint.closePreview") }}</el-button
        >
      </div>
    </el-dialog>
    <!-- 导出代码 -->
    <el-dialog
      :title="i18nt('designer.toolbar.exportCode')"
      :visible.sync="showExportCodeDialogFlag"
      v-if="showExportCodeDialogFlag"
      :show-close="true"
      class="small-padding-dialog"
      center
      v-dialog-drag
      width="65%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
    >
      <el-tabs
        type="border-card"
        class="no-box-shadow no-padding"
        v-model="activeCodeTab"
      >
        <el-tab-pane label="Vue" name="vue">
          <code-editor
            :mode="'html'"
            :readonly="true"
            v-model="vueCode"
            :user-worker="false"
          ></code-editor>
        </el-tab-pane>
        <el-tab-pane label="HTML" name="html">
          <code-editor
            :mode="'html'"
            :readonly="true"
            v-model="htmlCode"
            :user-worker="false"
          ></code-editor>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="copy-vue-btn"
          :data-clipboard-text="vueCode"
          @click="copyVueCode"
        >
          {{ i18nt("designer.hint.copyVueCode") }}</el-button
        >
        <el-button
          type="primary"
          class="copy-html-btn"
          :data-clipboard-text="htmlCode"
          @click="copyHtmlCode"
        >
          {{ i18nt("designer.hint.copyHtmlCode") }}</el-button
        >
        <el-button @click="saveVueCode">{{
          i18nt("designer.hint.saveVueCode")
        }}</el-button>
        <el-button @click="saveHtmlCode">{{
          i18nt("designer.hint.saveHtmlCode")
        }}</el-button>
        <el-button type="" @click="showExportCodeDialogFlag = false">
          {{ i18nt("designer.hint.closePreview") }}</el-button
        >
      </div>
    </el-dialog>
    <!-- 获取表单元素值  :visible.sync="showFormDataDialogFlag" v-if="showFormDataDialogFlag" v-dialog-drag-->
    <el-dialog
      :title="i18nt('designer.hint.exportFormData')"
      v-model="showFormDataDialogFlag"
      :show-close="true"
      class="dialog-title-light-bg"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :append-to-body="true"
    >
      <div style="border: 1px solid #dcdfe6">
        <code-editor
          :mode="'json'"
          :readonly="true"
          v-model="formDataJson"
        ></code-editor>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="copy-form-data-json-btn"
          :data-clipboard-text="formDataRawJson"
          @click="copyFormDataJson"
        >
          {{ i18nt("designer.hint.copyFormData") }}</el-button
        >
        <el-button @click="saveFormData">{{
          i18nt("designer.hint.saveFormData")
        }}</el-button>
        <el-button type="" @click="showFormDataDialogFlag = false">
          {{ i18nt("designer.hint.closePreview") }}</el-button
        >
      </div>
    </el-dialog>
    <!-- 生成SFC -->
    <el-dialog
      :title="i18nt('designer.toolbar.generateSFC')"
      :visible.sync="showExportSFCDialogFlag"
      v-if="showExportSFCDialogFlag"
      :show-close="true"
      class="small-padding-dialog"
      center
      v-dialog-drag
      width="65%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
    >
      <el-tabs
        type="border-card"
        class="no-box-shadow no-padding"
        v-model="activeSFCTab"
      >
        <el-tab-pane label="Vue2" name="vue2">
          <code-editor
            :mode="'html'"
            :readonly="true"
            v-model="sfcCode"
            :user-worker="false"
          ></code-editor>
        </el-tab-pane>
        <el-tab-pane label="Vue3" name="vue3">
          <code-editor
            :mode="'html'"
            :readonly="true"
            v-model="sfcCodeV3"
            :user-worker="false"
          ></code-editor>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="copy-vue2-sfc-btn"
          :data-clipboard-text="sfcCode"
          @click="copyV2SFC"
        >
          {{ i18nt("designer.hint.copyVue2SFC") }}</el-button
        >
        <el-button
          type="primary"
          class="copy-vue3-sfc-btn"
          :data-clipboard-text="sfcCodeV3"
          @click="copyV3SFC"
        >
          {{ i18nt("designer.hint.copyVue3SFC") }}</el-button
        >
        <el-button @click="saveV2SFC">{{
          i18nt("designer.hint.saveVue2SFC")
        }}</el-button>
        <el-button @click="saveV3SFC">{{
          i18nt("designer.hint.saveVue3SFC")
        }}</el-button>
        <el-button type="" @click="showExportSFCDialogFlag = false">
          {{ i18nt("designer.hint.closePreview") }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VFormRender from "@/components/form-render/index";
import CodeEditor from "@/components/code-editor/index";
import Clipboard from "clipboard";
import {
  deepClone,
  copyToClipboard,
  generateId,
  getQueryParam,
  traverseAllWidgets,
  addWindowResizeHandler,
} from "@/utils/util";
import i18n from "@/utils/i18n";
import { generateCode } from "@/utils/code-generator";
import { genSFC } from "@/utils/sfc-generator";
import loadBeautifier from "@/utils/beautifierLoader";
import { saveAs } from "file-saver";
import axios from "axios";
import { insertData, queryData } from "@/api/index";
import { createDesigner } from "@/components/form-designer/designer"; //设计器对象文件

export default {
  name: "previewIframe",
  mixins: [i18n],
  components: {
    VFormRender,
    CodeEditor,
    Clipboard,
  },
  data() {
    return {
      // designerConfig: {}, //this.getDesignerConfig()
      designer: createDesigner(this),
      toolbarWidth: 420,
      showPreviewDialogFlag: false,
      showImportJsonDialogFlag: false,
      showExportJsonDialogFlag: false,
      showExportCodeDialogFlag: false,
      showFormDataDialogFlag: false,
      showExportSFCDialogFlag: false,
      showNodeTreeDrawerFlag: false,

      nodeTreeData: [],

      testFunc: "",
      importTemplate: "",
      jsonContent: "",
      jsonRawContent: "",

      formDataJson: "",
      formDataRawJson: "",

      vueCode: "",
      htmlCode: "",

      sfcCode: "",
      sfcCodeV3: "",

      activeCodeTab: "vue",
      activeSFCTab: "vue2",

      testFormData: {
        // 'userName': '666888',
        // 'productItems': [
        //   {'pName': 'iPhone12', 'pNum': 10},
        //   {'pName': 'P50', 'pNum': 16},
        // ]

        select62173: 2,
      },
      testOptionData: {
        select62173: [
          { label: "01", value: 1 },
          { label: "22", value: 2 },
          { label: "333", value: 3 },
        ],
      },
      designerConfig: {
        languageMenu: true, //是否显示语言切换菜单
        externalLink: true, //是否显示GitHub、文档等外部链接
        formTemplates: false, //是否显示表单模板
        eventCollapse: true, //是否显示组件事件属性折叠面板
        widgetNameReadonly: false, //禁止修改组件名称
        clearDesignerButton: true, //是否显示清空设计器按钮
        previewFormButton: true, //是否显示预览表单按钮
        importJsonButton: true, //是否显示导入JSON按钮
        exportJsonButton: true, //是否显示导出JSON器按钮
        exportCodeButton: true, //是否显示导出代码按钮
        generateSFCButton: true, //是否显示生成SFC按钮
        toolbarMaxWidth: 420, //设计器工具按钮栏最大宽度（单位像素）
        toolbarMinWidth: 300, //设计器工具按钮栏最小宽度（单位像素）
        presetCssCode: "", //设计器预设CSS样式代码
        resetFormJson: false, //是否在设计器初始化时将表单内容重置为空
      },
      bannedWidgets: [],
      renderComponent: true,
      formId: "",
    };
  },
  computed: {
    formJson() {
      return {
        // widgetList: this.designer.widgetList,
        // formConfig: this.designer.formConfig

        widgetList: deepClone(this.designer.widgetList),
        formConfig: deepClone(this.designer.formConfig),
      };
    },

    undoDisabled() {
      return !this.designer.undoEnabled();
    },

    redoDisabled() {
      return !this.designer.redoEnabled();
    },

    layoutType() {
      return this.designer.getLayoutType();
    },
  },
  created() {
    console.log('现在是预览页面');
    
    // this.getrouteInfo();
    this.renderComponent = false;
    // if (this.$route.query) {
    //   this.formId = this.$route.query.id;
    // }
    // 解析URL中的查询字符串
    const urlParams = new URLSearchParams(window.location.search);
    this.formId = urlParams.get("id");
    this.renderData();

    this.$nextTick(() => {
      window.addEventListener("message", this.addNewProject);
      // 告诉父组件准备好接收消息了
      window.parent.postMessage(
        {
          ready: "ready-for-receiving",
        },
        "*"
      );
    });
  },

  destroyed() {
    // 注意移除监听！注意移除监听！注意移除监听！
    window.removeEventListener("message");
  },
  methods: {
    goBack() {
      // this.showPreviewDialogFlag = false
      // this.$router.push("/");
      window.parent.postMessage(
        {
          type: "exit",
          // message: {
          //   message: fomConfig,
          // },
        },
        "*"
      );
    },
    renderData() {
      // console.log(this.formId);
      //get获取数据
      const urlParams = new URLSearchParams(window.location.search);
      const idParams = urlParams.get("id");
      queryData(idParams)
        .then((res) => {
            if (res.code == 200) {
            if (res.data && res.data.formConfig) {
              const formConfigBackup=JSON.parse(res.data.formConfig).formConfigBackup
              const widgetListBackup=JSON.parse(res.data.formConfig).widgetListBackup
              this.formJson.formConfig = formConfigBackup;
              this.formJson.widgetList = widgetListBackup;
            }
            this.$nextTick(() => {
              // 获取到表单数据后 再在 DOM 中添加VFormRender组件
              this.renderComponent = true;
              this.$message.success(res.msg);
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // submit() {
    //   this.$refs.preForm
    //     .getFormData()
    //     .then((formData) => {
    //       // 告诉父组件准备好接收消息了
    //       console.log(formData);
    //     })
    //     .catch((error) => {
    //       this.$message.error(error);
    //     });
    // },
    showToolButton(configName) {
      if (this.designerConfig[configName] === undefined) {
        return true;
      }

      return !!this.designerConfig[configName];
    },

    buildTreeNodeOfWidget(widget, treeNode) {
      let curNode = {
        id: widget.id,
        label: widget.options.label || widget.type,
        //selectable: true,
      };
      treeNode.push(curNode);

      if (widget.category === undefined) {
        return;
      }

      curNode.children = [];
      if (widget.type === "grid") {
        widget.cols.map((col) => {
          let colNode = {
            id: col.id,
            label: col.options.name || widget.type,
            children: [],
          };
          curNode.children.push(colNode);
          col.widgetList.map((wChild) => {
            this.buildTreeNodeOfWidget(wChild, colNode.children);
          });
        });
      } else if (widget.type === "table") {
        //TODO: 需要考虑合并单元格！！
        widget.rows.map((row) => {
          let rowNode = {
            id: row.id,
            label: "table-row",
            selectable: false,
            children: [],
          };
          curNode.children.push(rowNode);

          row.cols.map((cell) => {
            if (cell.merged) {
              //跳过合并单元格！！
              return;
            }

            let rowChildren = rowNode.children;
            let cellNode = {
              id: cell.id,
              label: "table-cell",
              children: [],
            };
            rowChildren.push(cellNode);

            cell.widgetList.map((wChild) => {
              this.buildTreeNodeOfWidget(wChild, cellNode.children);
            });
          });
        });
      } else if (widget.type === "tab") {
        widget.tabs.map((tab) => {
          let tabNode = {
            id: tab.id,
            label: tab.options.name || widget.type,
            selectable: false,
            children: [],
          };
          curNode.children.push(tabNode);
          tab.widgetList.map((wChild) => {
            this.buildTreeNodeOfWidget(wChild, tabNode.children);
          });
        });
      } else if (widget.type === "sub-form") {
        widget.widgetList.map((wChild) => {
          this.buildTreeNodeOfWidget(wChild, curNode.children);
        });
      } else if (widget.category === "container") {
        //自定义容器
        widget.widgetList.map((wChild) => {
          this.buildTreeNodeOfWidget(wChild, curNode.children);
        });
      }
    },

    refreshNodeTree() {
      this.nodeTreeData.length = 0;
      this.designer.widgetList.forEach((wItem) => {
        this.buildTreeNodeOfWidget(wItem, this.nodeTreeData);
      });
    },

    showNodeTreeDrawer() {
      this.refreshNodeTree();
      this.showNodeTreeDrawerFlag = true;
      this.$nextTick(() => {
        if (this.designer.selectedId) {
          //同步当前选中组件到节点树！！！
          this.$refs.nodeTree.setCurrentKey(this.designer.selectedId);
        }
      });
    },

    undoHistory() {
      this.designer.undoHistoryStep();
    },

    redoHistory() {
      this.designer.redoHistoryStep();
    },

    changeLayoutType(newType) {
      this.designer.changeLayoutType(newType);
    },

    clearFormWidget() {
      this.designer.clearDesigner();
    },

    previewForm() {
      this.showPreviewDialogFlag = true;
    },

    saveAsFile(fileContent, defaultFileName) {
      this.$prompt(
        this.i18nt("designer.hint.fileNameForSave"),
        this.i18nt("designer.hint.saveFileTitle"),
        {
          inputValue: defaultFileName,
          closeOnClickModal: false,
          inputPlaceholder: this.i18nt(
            "designer.hint.fileNameInputPlaceholder"
          ),
        }
      )
        .then(({ value }) => {
          if (!value) {
            value = defaultFileName;
          }

          if (getQueryParam("vscode") == 1) {
            this.vsSaveFile(value, fileContent);
            return;
          }

          const fileBlob = new Blob([fileContent], {
            type: "text/plain;charset=utf-8",
          });
          saveAs(fileBlob, value);
        })
        .catch(() => {
          //
        });
    },

    vsSaveFile(fileName, fileContent) {
      const msgObj = {
        cmd: "writeFile",
        data: {
          fileName,
          code: fileContent,
        },
      };
      window.parent.postMessage(msgObj, "*");
    },

    importJson() {
      this.importTemplate = JSON.stringify(
        this.designer.getImportTemplate(),
        null,
        "  "
      );
      this.showImportJsonDialogFlag = true;
    },

    doJsonImport() {
      try {
        let importObj = JSON.parse(this.importTemplate);
        this.designer.loadFormJson(importObj);

        this.showImportJsonDialogFlag = false;
        this.$message.success(this.i18nt("designer.hint.importJsonSuccess"));

        this.designer.emitHistoryChange();

        this.designer.emitEvent("form-json-imported", []);
      } catch (ex) {
        this.$message.error(ex + "");
      }
    },

    exportJson() {
      let widgetList = deepClone(this.designer.widgetList);
      let formConfig = deepClone(this.designer.formConfig);
      this.jsonContent = JSON.stringify({ widgetList, formConfig }, null, "  ");
      this.jsonRawContent = JSON.stringify({ widgetList, formConfig });
      this.showExportJsonDialogFlag = true;
    },

    copyFormJson(e) {
      copyToClipboard(
        this.jsonRawContent,
        e,
        this.$message,
        this.i18nt("designer.hint.copyJsonSuccess"),
        this.i18nt("designer.hint.copyJsonFail")
      );
    },

    saveFormJson() {
      this.saveAsFile(this.jsonContent, `vform${generateId()}.json`);
    },

    exportCode() {
      this.vueCode = generateCode(this.formJson);
      this.htmlCode = generateCode(this.formJson, "html");
      this.showExportCodeDialogFlag = true;
    },

    copyVueCode(e) {
      copyToClipboard(
        this.vueCode,
        e,
        this.$message,
        this.i18nt("designer.hint.copyVueCodeSuccess"),
        this.i18nt("designer.hint.copyVueCodeFail")
      );
    },

    copyHtmlCode(e) {
      copyToClipboard(
        this.htmlCode,
        e,
        this.$message,
        this.i18nt("designer.hint.copyHtmlCodeSuccess"),
        this.i18nt("designer.hint.copyHtmlCodeFail")
      );
    },

    saveVueCode() {
      this.saveAsFile(this.vueCode, `vform${generateId()}.vue`);
    },

    saveHtmlCode() {
      this.saveAsFile(this.htmlCode, `vform${generateId()}.html`);
    },

    generateSFC() {
      loadBeautifier((beautifier) => {
        this.sfcCode = genSFC(
          this.designer.formConfig,
          this.designer.widgetList,
          beautifier
        );
        this.sfcCodeV3 = genSFC(
          this.designer.formConfig,
          this.designer.widgetList,
          beautifier,
          true
        );
        this.showExportSFCDialogFlag = true;
      });
    },

    copyV2SFC(e) {
      copyToClipboard(
        this.sfcCode,
        e,
        this.$message,
        this.i18nt("designer.hint.copySFCSuccess"),
        this.i18nt("designer.hint.copySFCFail")
      );
    },

    copyV3SFC(e) {
      copyToClipboard(
        this.sfcCodeV3,
        e,
        this.$message,
        this.i18nt("designer.hint.copySFCSuccess"),
        this.i18nt("designer.hint.copySFCFail")
      );
    },

    saveV2SFC() {
      this.saveAsFile(this.sfcCode, `vformV2-${generateId()}.vue`);
    },

    saveV3SFC() {
      this.saveAsFile(this.sfcCodeV3, `vformV3-${generateId()}.vue`);
    },

    getFormData() {
      this.$refs["preForm"]
        .getFormData()
        .then((formData) => {
          console.log(formData);
          this.formDataJson = JSON.stringify(formData, null, "  ");
          this.formDataRawJson = JSON.stringify(formData);

          this.showFormDataDialogFlag = true;
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },

    copyFormDataJson(e) {
      copyToClipboard(
        this.formDataRawJson,
        e,
        this.$message,
        this.i18nt("designer.hint.copyJsonSuccess"),
        this.i18nt("designer.hint.copyJsonFail")
      );
    },

    saveFormData() {
      this.saveAsFile(this.htmlCode, `formData${generateId()}.json`);
    },

    resetForm() {
      this.$refs["preForm"].resetForm();
    },
    //disableForm	禁用表单编辑
    setFormDisabled() {
      this.$refs["preForm"].disableForm();
    },

    setFormEnabled() {
      this.$refs["preForm"].enableForm();
    },

    printFormJson() {
      let tmpFS = {
        widgetList: deepClone(this.designer.widgetList),
        formConfig: deepClone(this.designer.formConfig),
      };

      console.log(tmpFS);
    },

    testValidate() {
      console.log("test===", this.$refs["preForm"].validateForm());
    },

    testSetFormData() {
      // let fData = {
      //   'fuTest': [
      //     {
      //       name: '上传文件测试.xlsx',
      //       url: 'https://www.vform666.com/123.xlsx'
      //     }
      //   ]
      // }
      // this.$refs['preForm'].setFormData(fData)

      let nfData = {
        checkbox45524: [1, 2],
      };
      this.$refs["preForm"].setFormData(nfData);
    },
    //表单数据改变后触发
    handleFormChange(fieldName, newValue, oldValue, formModel) {
      /*
        console.log('---formChange start---')
        console.log('fieldName', fieldName)
        console.log('newValue', newValue)
        console.log('oldValue', oldValue)
        console.log('formModel', formModel)
        console.log('---formChange end---')
        */
    },

    testOnAppendButtonClick(clickedWidget) {
      console.log("test", clickedWidget);
    },

    testOnButtonClick(button) {
      console.log("test", button);
    },

    findWidgetById(wId) {
      let foundW = null;
      traverseAllWidgets(this.designer.widgetList, (w) => {
        if (w.id === wId) {
          foundW = w;
        }
      });

      return foundW;
    },

    onNodeTreeClick(nodeData, node, nodeEl) {
      //console.log('test', JSON.stringify(nodeData))

      if (nodeData.selectable !== undefined && !nodeData.selectable) {
        this.$message.info(
          this.i18nt("designer.hint.currentNodeCannotBeSelected")
        );
      } else {
        const selectedId = nodeData.id;
        const foundW = this.findWidgetById(selectedId);
        if (foundW) {
          this.designer.setSelected(foundW);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
div.toolbar-container {
  //min-width: 728px;  /* 解决工具按钮栏换行的问题 */
  /* 上一行css有问题，当窗口宽度不足时会把按钮挤出到右边的属性设置区，弃之！ */
}

.left-toolbar {
  float: left;
  font-size: 16px;
}

.right-toolbar {
  float: right;
  //width: 420px;
  text-align: right;
  overflow: hidden;

  .right-toolbar-con {
    text-align: left;
    width: 600px;
  }

  ::v-deep(.el-button--text) {
    font-size: 14px !important;
  }
}

.el-button i {
  margin-right: 3px;
}

.small-padding-dialog {
  ::v-deep(.el-dialog__header) {
    //padding-top: 3px;
    //padding-bottom: 3px;
    background: #f1f2f3;
  }

  ::v-deep(.el-dialog__body) {
    padding: 12px 15px 12px 15px;

    .el-alert.alert-padding {
      padding: 0 10px;
    }
  }

  ::v-deep(.ace-container) {
    border: 1px solid #dcdfe6;
  }
}

.dialog-title-light-bg {
  ::v-deep(.el-dialog__header) {
    background: #f1f2f3;
  }
}

.no-box-shadow {
  box-shadow: none;
}

.no-padding.el-tabs--border-card {
  ::v-deep(.el-tabs__content) {
    padding: 0;
  }
}

.form-render-wrapper {
  //height: calc(100vh - 142px);
  //all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
}

.form-render-wrapper.h5-layout {
  margin: 0 auto;
  width: 420px;
  border-radius: 15px;
  //border-width: 10px;
  box-shadow: 0 0 1px 10px #495060;
  height: calc(100vh - 142px);
  overflow-y: auto;
  overflow-x: hidden;
}

.form-render-wrapper.pad-layout {
  margin: 0 auto;
  width: 960px;
  border-radius: 15px;
  //border-width: 10px;
  box-shadow: 0 0 1px 10px #495060;
  height: calc(100vh - 142px);
  overflow-y: auto;
  overflow-x: hidden;
}

.node-tree-drawer ::v-deep {
  .el-drawer {
    padding: 10px;
    overflow: auto;
  }

  .el-drawer__header {
    margin-bottom: 12px;
    padding: 5px 5px 0;
  }

  .el-drawer__body {
    padding-left: 5px;
  }
}

/*.node-tree-scroll-bar {*/
/*  height: 100%;*/
/*  overflow: auto;*/
/*}*/

.node-tree ::v-deep {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 12px;
  }

  .el-tree-node__content {
    padding-left: 0 !important;
  }

  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  .el-tree-node__children {
    padding-left: 12px;
    overflow: visible !important; /* 加入此行让el-tree宽度自动撑开，超出宽度el-draw自动出现水平滚动条！ */
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -10px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 16px;
  }

  .el-tree-node.is-current > .el-tree-node__content {
    background: #c2d6ea !important;
  }

  .el-tree-node__expand-icon {
    margin-left: -3px;
    padding: 6px 6px 6px 0px;
    font-size: 16px;
  }
}
</style>
